import { useEffect, useRef, useState } from "react"
import WordCloud from "wordcloud";
import { Row, Col, Card } from "antd"
import { cloudData } from "../../api/data-api";
import { timeStdFormat } from "../dash-board/DashBoard";
import { DatePicker, Space } from 'antd';
import { Typography, Select } from 'antd';
import _ from "lodash";

const { RangePicker } = DatePicker;

export default function CoundPanel(props){

  const chart = useRef(null)
  const container = useRef(null)

  const [rangeTime, setRangeTime] = useState(["2022-1-1", '2023-1-1']) 
  const handleChangeTime = (date, dateString)=>{
    setRangeTime(dateString)
  }

  const [list, setList] = useState(null)
  const [type, setType] = useState("")



  const [condition, setCondition] = useState({"page": 1,
  "page_size": 40,
  "type": "",
  "keywords": "",
  "start_time": "2020-1-1",
  "end_time": timeStdFormat(new Date()),})

  const loadData = async (p)=>{
    if(!p){
      p = {}
    }
    const param = {
      ...condition,
      ...p
    }
    setCondition(param)

    cloudData(param).then(
      resp=>{
        const data = resp.data.data
        const newList = data.map(item=>{
          return [item.key, item.value]
        })
        setList(newList)
      }
    )

  }

  useEffect(()=>{
    loadData()
    const canvas = chart.current
    const containerDom = container.current

    canvas.width = containerDom.offsetWidth;
    canvas.height = containerDom.offsetHeight;
  }, [])

  useEffect(()=>{
    if(!list){return;}
    const maxItem = _.maxBy(list, item=>item[1])
    let maxValue = 400
    if(maxItem) maxValue = maxItem[1]
    const newList = list.map(item=>{
      return [item[0], item[1] / maxValue * 400]
    })
    WordCloud(chart.current, { list: newList } );
  }, [list])

  useEffect(()=>{
    if(rangeTime) loadData({start_time: rangeTime[0], end_time: rangeTime[1]})
  }, [rangeTime])

  useEffect(()=>{
    loadData({type})
  }, [type])

  return <>
    <Row>
      <Col span={24}>
        <Card title="热词统计"
          extra={<>
          <Space>
            <Space>
            <Typography.Text>起始时间点: </Typography.Text><RangePicker onChange={handleChangeTime} />
            </Space>
            <Typography.Text>专业类型: </Typography.Text>
            <Select
              defaultValue=""
              style={{
                width: 120,
              }}
              value={type}
              allowClear
              onChange={(value)=>{setType(value)}}
              options={[
                {
                  value: '计算机',
                  label: '计算机',
                },
                {
                  value: '艺术',
                  label: '艺术',
                },
                {
                  value: '教育学',
                  label: '教育学',
                },
                {
                  value: '经济学',
                  label: '经济学',
                },
                {
                  value: '医学',
                  label: '医学',
                },
                {
                  value: '法学',
                  label: '法学',
                },
              ]}
            />
            </Space>
          </>}
        >
          <div ref={container} style={{width: '100%', height: '550px'}}>
            <canvas ref={chart} height={300}></canvas>
          </div>
        </Card>
      </Col>
    </Row>
  </>
}